<div class="emoji hidden" id="emojiBox">
    <div class="group" id="emojiLi">
        <ul></ul>
    </div>
    <div class="category">
        <ul> </ul>
    </div>

</div>

<script src="__PUBLIC__/chat/js/emoji.js"></script>

<script>
    $.each(emojiKey, function(i, v) {
        if (i == 0) {
            $('#emojiBox .category ul').append('<li><a href="javascript:;" class="active" onclick="swEmoji(this)" data-id="' + v[1] + '">' + v[0] + '</a></li>');
        } else {
            $('#emojiBox .category ul').append('<li><a href="javascript:;" onclick="swEmoji(this)" data-id="' + v[1] + '">' + v[0] + '</a></li>');
        }
    })


    setEmoji(emojiKey[0][1]);

    function setEmoji(emoji) {
        $('#emojiLi ul').empty();
        var emojiarray = emojiArray[emoji].split(',');
        $.each(emojiarray, function(i, v) {
            $('#emojiLi ul').append('<li><a href="javascript:;" onclick="clEmoji(this)" data-emoji="' + v + '">' + v + '</a></li>');
        })
    }

    function clEmoji(e) {
        var emoji = $(e).data('emoji');
        var text = $('#textarea_data').val();
        text = text + emoji;
        $('#textarea_data').val(text);
    }

    function swEmoji(e) {
        $('#emojiBox .category ul li a').removeClass('active');
        $(e).addClass('active');
        setEmoji($(e).data('id'));

    }
</script>